<template>
  <el-popover popper-class="analysis-popper" placement="right-start" width="300" trigger="click">
    <div class="plot-container">
      <div class="plot-container__header">
        <ul>
          <li>
            <input type="checkbox" :checked="checkbox" @change="checkboxChange(true)" />
            <span>面</span>
          </li>
          <li>
            <input type="checkbox" :checked="!checkbox" @change="checkboxChange(false)" />
            <span>线</span>
          </li>
          <li>
            <el-color-picker v-model="color" size="mini" show-alpha @active-change="colorChange"></el-color-picker>
            <span>标绘颜色</span>
          </li>
        </ul>
      </div>
      <div class="plot-container__content">
        <el-scrollbar>
          <ul>
            <li
              v-for="(item, index) in plotArr"
              :key="index"
              @click="selectPlot(item.type, index)"
              :class="
                currentSelect === index ? 'plot-container__content--select' : ''
              "
            >
              <img :src="item.img" alt class="plot-container__icon" />
              <p>{{ item.type }}</p>
            </li>
          </ul>
        </el-scrollbar>
      </div>

      <div class="plot-container__footer">
        <ul>
          <li title="取消绘制" @click="destroy(1)">
            <img src="static/tool-bar/cancelPlot.png" alt />
          </li>
          <li title="选择清除" @click="destroy(2)">
            <img src="static/tool-bar/selectRemove.png" alt />
          </li>
          <li title="清除标绘" @click="destroy(3)">
            <img src="static/tool-bar/deleteAll.png" alt />
          </li>
        </ul>
      </div>
      <!-- 文字标绘弹窗 -->
      <div class="popover_span" id="popover_span">
        <textarea cols="20" rows="3" v-model="popoverSpan"></textarea>
        <button @click="popoverBtn">确认</button>
      </div>
    </div>
    <el-button slot="reference" icon="el-icon-edit" size="mini"   plain round></el-button>
  </el-popover>
</template>

<script src="./index.js"></script>

<style lang="scss" src="./index.scss"></style>
